<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">


    </div>
</body>

</html>
<script>

    // console.log(axios); // 函数

    // axios 是一个第三方的请求库
    // 使用时需要下载引入,fetch不需要
    // 支持primise 的api
    // 本质就是对ajax XMLhttprequest 的promise 封装;
    // 和fetch比较 自动转换JSON数据,而fetch 还需要自己手动转换

    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {
            getdata() {
                //  发起一个get请求 =>简写方式
                axios.get('https://api.i-lynn.cn/college?type=1&page=2')
                    .then(res => { console.log(res); }).catch(err => {
                        console.log(err);
                    })
            },
            postdata() {
                // 发起一个post请求,=> 简写方式 默认json 参数格式
                axios.post('https://api.i-lynn.cn/college', {
                    type: 1,
                    page: 2
                }).then(res => {
                    console.log(res);
                })
            },
            // 常规写法
            // formatdata() {
            //     axios({
            //         url: 'https://api.i-lynn.cn/college',
            //         method: 'get',
            //         headers: { 'content-type': 'application/x-www-form-urlencoded' },
            //         params: { // params 设置的是get 请求的参数
            //             type: 1,
            //             page: 2
            //         },
            //         timeout: 1000, // 设置前端的请求的时长,单位毫秒, 超过该事件,前端的请求自动结束终止
            //     }).then(res => {
            //         console.log(res);
            //     })
            // },
            formatdata1() {
                axios({
                    url: 'https://api.i-lynn.cn/college',
                    method: 'POST',
                    // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    data: { // data 设置的是post请求的参数
                        type: 1,
                        page: 2
                    },
                    //data: 'type=1&page=2',
                    timeout: 5000, // 设置前端的请求的时长,单位毫秒, 超过该事件,前端的请求自动结束终止
                }).then(res => {
                    console.log(res);
                })
            }


        },
        created() {
            // this.getdata();
            // this.postdata()
            this.formatdata1()
        }

    }).mount('#app')

</script>